<template>
    <div class="xhy-autograph-box">
        <div class="autograph-box">
            <div class="inside">
                <van-icon class="icon-full" name="enlarge" color="#008cff" @click="fullScreenShow" />
                <canvas class="xhy-canvas" />
                <span @click="againSignature">重新签名</span>
            </div>
        </div>
        <van-popup v-model="isShowFull" @close="closeFull" :close-on-click-overlay="false" close-on-popstate
            safe-area-inset-bottom closeable close-icon-position="bottom-right" position="left"
            :style="{ height: '100%', width: '100%' }">
            <div class="popup-box">
                <canvas class="xhy-canvasFull" />
                <div class="panel-full">
                    <van-button class="btn-again" type="info" @click="againFull">重新签名</van-button>
                    <van-button class="btn-confirm" plain type="primary" @click="confirmFull">确认签名</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import SignaturePad from 'signature_pad'
export default {
    name: "xhy-autograph",
    props: {
        config: {
            type: Object,
            default: {
                penColor: 'green', //笔刷颜色
                minWidth: 1 //最小宽度
            }
        }
    },
    data() {
        return {
            isShowFull: false, // 是否横屏显示
            signaturePad: null, // 存放竖屏SignaturePad对象
            signaturePadFull: null, // 存放横屏SignaturePad对象
            value: '',
            fullValue: ''
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            if (!this.signaturePad) {
                let canvas = document.querySelector('.xhy-canvas');
                this.signaturePad = new SignaturePad(canvas, this.config);
                this.signaturePad.onEnd = () => {
                    this.$emit('receive', this.signaturePad.toDataURL()); //通知父组件改变。
                }
                canvas.height = document.body.clientHeight / 3;
                canvas.width = document.body.clientWidth - 30;
            }
        },
        initFull() {
            if (!this.signaturePadFull) {
                let canvas = document.querySelector('.xhy-canvasFull');
                this.signaturePadFull = new SignaturePad(canvas, this.config);
                canvas.height = document.body.clientHeight * 0.82;
                canvas.width = document.body.clientWidth;
            }
        },
        closeFull() {

        },
        againFull() {
            this.signaturePadFull.clear();
        },
        confirmFull() {
            try {
                let _flag = this.signaturePadFull.isEmpty();
                this.signaturePad.clear();
                if (!_flag) {
                    this.fullValue = this.signaturePadFull.toDataURL();
                    this.rotateBase64Img(this.fullValue, 270, res => {
                        let _option = {
                            width: document.body.clientWidth - 30,
                            height: document.body.clientHeight / 3
                        }
                        this.signaturePad.fromDataURL(res, _option);
                        this.$emit('receive', res); //通知父组件改变。
                        this.isShowFull = false;
                    })
                }
            } catch (error) {
                console.log(error);
                this.isShowFull = false;
            }
        },
        fullScreenShow() {
            this.isShowFull = true;
            setTimeout(() => {
                this.initFull();
                let _flag = this.signaturePad.isEmpty();
                this.signaturePadFull.clear();
                if (!_flag) {
                    this.value = this.signaturePad.toDataURL();
                    this.rotateBase64Img(this.value, 90, res => {
                        let _option = {
                            width: document.body.clientWidth,
                            height: document.body.clientHeight * 0.82
                        }
                        this.signaturePadFull.fromDataURL(res, _option);
                    })
                }
            }, 100)
        },
        againSignature() {
            this.signaturePad.clear();
            this.$emit('receive', ''); //通知父组件改变。
        },
        // base64图片旋转方法
        rotateBase64Img(src, edg, callback) {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            var imgW; //图片宽度
            var imgH; //图片高度
            var size; //canvas初始大小
            if (edg % 90 != 0) {
                console.error("旋转角度必须是90的倍数!");
                throw '旋转角度必须是90的倍数!';
            }
            (edg < 0) && (edg = (edg % 360) + 360)
            const quadrant = (edg / 90) % 4; //旋转象限
            const cutCoor = {
                sx: 0,
                sy: 0,
                ex: 0,
                ey: 0
            }; //裁剪坐标
            var image = new Image();
            image.crossOrigin = "anonymous"
            image.src = src;
            image.onload = function () {
                imgW = image.width;
                imgH = image.height;
                size = imgW > imgH ? imgW : imgH;
                canvas.width = size * 2;
                canvas.height = size * 2;
                switch (quadrant) {
                    case 0:
                        cutCoor.sx = size;
                        cutCoor.sy = size;
                        cutCoor.ex = size + imgW;
                        cutCoor.ey = size + imgH;
                        break;
                    case 1:
                        cutCoor.sx = size - imgH;
                        cutCoor.sy = size;
                        cutCoor.ex = size;
                        cutCoor.ey = size + imgW;
                        break;
                    case 2:
                        cutCoor.sx = size - imgW;
                        cutCoor.sy = size - imgH;
                        cutCoor.ex = size;
                        cutCoor.ey = size;
                        break;
                    case 3:
                        cutCoor.sx = size;
                        cutCoor.sy = size - imgW;
                        cutCoor.ex = size + imgH;
                        cutCoor.ey = size + imgW;
                        break;
                }
                ctx.translate(size, size);
                ctx.rotate(edg * Math.PI / 180);
                ctx.drawImage(image, 0, 0);
                var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
                if (quadrant % 2 == 0) {
                    canvas.width = imgW;
                    canvas.height = imgH;
                } else {
                    canvas.width = imgH;
                    canvas.height = imgW;
                }
                ctx.putImageData(imgData, 0, 0);
                callback(canvas.toDataURL())
            };
        }
    }

}
</script>

<style lang="scss" scoped>
.xhy-autograph-box {
    // @include wh(100%, auto);

    .autograph-box {
        padding: 15px;
        width: 100%;
        height: auto;
        background-color: #fff;

        .inside {
            display: flex;
            position: relative;
            @include wh(100%, 100%);
            background-color: rgb(242, 242, 242);

            .icon-full {
                position: absolute;
                right: 0;
                top: 0;
                padding: 6px;
            }

            .xhy-canvas {}

            span {
                position: absolute;
                right: 0;
                bottom: 0;
                @include sc(12px, #008cff); // font-size  color
                padding: 6px;
            }
        }
    }

    .popup-box {
        @include wh(100%, 100%);
        background-color: rgb(242, 242, 242);

        .xhy-canvasFull {
            @include wh(100%, 82%);
            border-bottom: 1px solid #ccc;
        }

        .panel-full {
            @include wh(100%, 18%);
            position: relative;

            /deep/ .van-button {
                position: absolute;
                transform: rotate(90deg);
            }

            .btn-again {
                bottom: 40px;
                left: 66px;
            }

            .btn-confirm {
                bottom: 40px;
                left: 0px;
            }
        }
    }
}
</style>

